<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2{
            width: 300px;
            /* height: 100px; */
            background-color: orange;
        }
    </style>
</head>
<body>
    <button id="btn1" style="width: 70px;">add!</button>
    <button id="btn2" style="width: 70px;">remove!</button>
    <div class="box1"></div>

    <script>
        const btn1 = document.getElementById('btn1');
        const btn2 = document.getElementById('btn2');
        const box = document.querySelector('.box1');
        /* 
            出来直接修改样式外，也可以通过修改 class 属性来间接的修改样式

            通过class修改样式的好处：
                1. 可以一次性修改多个样式
                2. 对JS和CSS进行解耦
        */

        /* 
            元素.classList 是一个对象，对象中提供了对当前元素的类的各种操作方法

                元素.classList.add() 向元素中添加一个或多个class
                元素.classList.remove() 移出元素中一个或多个class
                元素.classList.toggle() 切换元素中一个class
        */
        btn1.onclick = function(){
            box.classList.add("box2");
        }

        btn2.onclick = function(){
            box.classList.remove("box2");
        }
    </script>
</body>
</html>